<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Rotating Rope</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Clear canvas with a white background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// --- Style setup ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 1.5;
// Using a common serif font for a classic textbook look
ctx.font = 'italic 26px "Times New Roman"';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Define coordinates ---
const origin = { x: 100, y: 200 };
const ropeLength = 320;

// --- Draw Axes and Rope ---
// Vertical axis of rotation
ctx.beginPath();
ctx.moveTo(origin.x, origin.y - 160);
ctx.lineTo(origin.x, origin.y + 160);
ctx.stroke();

// Horizontal line representing the stretched rope
ctx.beginPath();
ctx.moveTo(origin.x, origin.y);
ctx.lineTo(origin.x + ropeLength, origin.y);
ctx.stroke();

// --- Draw Labels and Symbols ---

// Label for the origin 'O'
ctx.fillText('O', origin.x - 25, origin.y);

// Labels for rope properties 'L₀, M, k'.
// U+2080 is the Unicode character for subscript zero.
ctx.fillText('L\u2080, M, k', origin.x + ropeLength / 2.5, origin.y - 30);

// --- Draw Rotation Symbol (ω and arrow) ---

// Define position and size for the rotation arrow
const arrowCenterY = origin.y - 125;
const arrowRadius = 20;

// Label for angular velocity 'ω' (omega). U+03C9 is the Unicode for ω.
ctx.fillText('\u03C9', origin.x + 50, arrowCenterY);

// Draw the curved arrow for rotation
// In a Y-down canvas, `anticlockwise=false` results in a visually counter-clockwise arc.
// The arc goes from the right side, over the top, to the left side.
const startAngle = -0.1 * Math.PI;
const endAngle = Math.PI;
ctx.beginPath();
ctx.arc(origin.x, arrowCenterY, arrowRadius, startAngle, endAngle, false);
ctx.stroke();

// Draw the filled arrowhead at the end of the arc
const tipX = origin.x + arrowRadius * Math.cos(endAngle);
const tipY = origin.y - 125 + arrowRadius * Math.sin(endAngle);

ctx.beginPath();
ctx.moveTo(tipX, tipY);
// The lines for the arrowhead are drawn relative to the tip to form a triangle pointing left and slightly up.
ctx.lineTo(tipX + 12, tipY - 5);
ctx.lineTo(tipX + 10, tipY + 8);
ctx.closePath();
ctx.fill();

</script>
</body>
</html>